<template>
  <!-- 全局引入TinyMCE -->

  <el-dialog
    v-model="editDialogVisible"
    title="修改资源信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="menuForm"
      :rules="rules"
      label-width="120px"
    >
     <el-form-item label="父节点" prop="parentId">
        <el-select v-model="menuForm.parentId" filterable placeholder="请选择">
        <el-option
          v-for="item in menus"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
        <!-- <el-input v-model="menuForm.parentId"></el-input> -->
      </el-form-item>
      <el-form-item label="资源名称" prop="name">
        <el-input v-model="menuForm.name"></el-input>
      </el-form-item>
      <el-form-item label="权限控制url" prop="url">
        <el-input v-model="menuForm.url"></el-input>
      </el-form-item>
      <el-form-item label="路由路径" prop="path">
        <el-input v-model="menuForm.path"></el-input>
      </el-form-item>
      <el-form-item label="组件名称" prop="component">
        <el-input v-model="menuForm.component"></el-input>
      </el-form-item>
    
      <el-form-item label="资源图标" prop="iconCls">
        <el-input v-model="menuForm.iconCls"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="validateLogin()" type="primary" >修改</el-button>
            <el-button @click="() => {  closeDialog(false); } ">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs,onMounted } from "vue";
import { ElNotification } from "element-plus";
import { getRequest, putRequest } from '../../../utils/api';

function useLoadFormData(state) {
  getRequest("/system/cfg/one", {  id: state.id }).then((res) => {
    if(res && res.code==200){
      state.menuForm = res.data;
    }else{
      ElNotification({
                        type:"error",
                        title:'失败',
                        message:"查询失败",
                        duration:2000
                      });
    }
   
    // state.imageUrl = res.data.coverImg;
    //  editor.value.setHTML(res.data.menuDetail);
  });
}

function load2LayerMenu(state) {
  getRequest("/system/cfg/layerMenus").then((res) => {
    if(res && res.code==200){
      state.menus = res.data;
    }else{
      ElNotification({
                        type:"error",
                        title:'失败',
                        message:"查询失败",
                        duration:2000
                      });
    }
   
   
  });
}

export default {
  components: {},
  props: {
    editDialogVisible: Boolean,
    menuId: String,
  },
  setup(props,{emit}){
     const validateForm = ref();
   

    const rules = {
     name: [{ required: true, message: "请输入资源名", trigger: "blur" }],
      url: [{ required: true, message: "请输入访问url", trigger: "blur" }],
      path: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
      components: [{ required: true, message: "请输入组件名称", trigger: "blur" }]
    };
  const state = reactive({
        editDialogVisible: props.editDialogVisible,
        imageUrl: "",
        id: props.menuId,
        menus:[],
       // headers: { Authorization: window.sessionStorage.getItem("tokenStr") },
        menuForm: {
          name: "",
          parentId:1,
          url: "",
          path: "/",
          components: "",
          iconCls: "",
          enabled:true,
          requireAuth:true
        }
      });
    const closeDialog = (visible, data) => {
      emit("onEditCloseDialog", visible, data);
    }
    const validateLogin = ()=>{
     validateForm.value.validate((valid) => {
   
      putRequest("/system/cfg/list/", state.menuForm).then((res) => {
        if(res && res.code==200){
            validateForm.value.resetFields();
            //需要重新清除富文本编辑器
            emit("onEditCloseDialog", false, res.data);
        }else{
           ElNotification({
                        type:"error",
                        title:'失败',
                        message:res.message,
                        duration:2000
                      });
        }
        
      });
    });
    }

      onMounted(()=>{
         useLoadFormData(state);
        load2LayerMenu(state);
      })
      return {
        state,
      ...toRefs(state),
      rules,
      validateForm ,
      validateLogin,
      closeDialog
    };
  } 
    
};
</script>

<style>
.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>